<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>6.2 CSS3 用text-overflow解决文字排版问题</title>
    <style>
        .demo{
            margin: 30px auto;
            width: 100px;
            padding: 10px;
            border: 1px solid #ccc;
            height: 50px;
            text-overflow: clip;
            overflow: hidden;
        }

        .demo1{
            margin: 0px auto;
            width: 100px;
            padding: 10px;
            border: 1px solid #ccc;
            height: 50px;
            text-overflow: ellipsis;/*必须跟这两个属性overflow和whit-space*/
            overflow: hidden;
            white-space: nowrap;/*强制不换行  */
        }
    </style>
</head>
<body>
   <div class="demo">
       2019年贺岁档的电影小编就先介绍到这了，还有100多天，也不知道还有哪些电影会加入贺岁档，比如这部周星驰的电影《美人鱼2》，《美人鱼2》已经确认是杀青了，但是会不会在2019年贺岁档上映还不得而知。但是相信以上的九部电影会满足你的观影需求，你最期待其中的哪部电影呢？又会为哪部电影走进电影院呢？期待你的留言观点，谢谢大家。
   </div>
   <div class="demo1">
       2019年贺岁档的电影小编就先介绍到这了，还有100多天，也不知道还有哪些电影会加入贺岁档，比如这部周星驰的电影《美人鱼2》，《美人鱼2》已经确认是杀青了，但是会不会在2019年贺岁档上映还不得而知。但是相信以上的九部电影会满足你的观影需求，你最期待其中的哪部电影呢？又会为哪部电影走进电影院呢？期待你的留言观点，谢谢大家。
   </div>
</body>
</html>